<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>项目配置 - Switcher3</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <!-- 主容器 -->
  <div class="container">
    <!-- 页面头部 -->
    <header class="header-simple">
      <div class="header-content-simple">
        <div class="header-left">
          <button class="btn btn-outline" onclick="goBack()" title="返回主页">
            <i class="fas fa-arrow-left"></i>
            返回
          </button>
          <h1 class="title-simple">
            <i class="fas fa-cog"></i>
            项目配置
          </h1>
        </div>
        <div class="header-right">
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 加载状态 -->
      <div class="loading-container" id="loadingContainer">
        <div class="loading-state">
          <i class="fas fa-spinner fa-spin"></i>
          <span>加载项目配置...</span>
        </div>
      </div>

      <!-- 配置内容 -->
      <div class="config-container" id="configContainer" style="display: none;">
        <!-- 基本信息卡片 -->
        <div class="config-card">
          <div class="card-header">
            <h3 class="card-title">
              <i class="fas fa-info-circle"></i>
              基本信息
            </h3>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label" for="projectNameEdit">项目名称</label>
              <div class="input-group">
                <input type="text" class="form-input" id="projectNameEdit" placeholder="项目名称">
                <button class="btn btn-primary" id="renameBtn">
                  <i class="fas fa-save"></i>
                  保存
                </button>
              </div>
              <small class="form-help">项目名称应该简洁明了，便于识别</small>
            </div>
          </div>
        </div>

        <!-- 环境配置卡片 -->
        <div class="config-card">
          <div class="card-header">
            <h3 class="card-title">
              <i class="fas fa-server"></i>
              环境配置
            </h3>
          </div>
          <div class="card-body">
            <!-- 测试环境 -->
            <div class="environment-config">
              <div class="environment-header-simple">
                <h4 class="environment-title-left">
                  <i class="fas fa-flask"></i>
                  测试环境
                </h4>
                <button class="btn btn-primary btn-sm" id="testEnvSaveBtn">
                  <i class="fas fa-save"></i>
                  保存
                </button>
              </div>
              <div class="form-group">
                <textarea class="textarea-input" id="testEnvironmentConfig" 
                          placeholder="# 测试环境配置&#10;# 格式：IP地址 域名&#10;# 例如：&#10;192.168.1.100 api.example.com&#10;192.168.1.101 cdn.example.com"></textarea>
                <small class="form-help">
                  配置格式：<code>IP地址 域名</code>，每行一个映射。支持注释（以 # 开头）
                </small>
              </div>
            </div>

            <hr class="divider">

            <!-- 生产环境 -->
            <div class="environment-config">
              <div class="environment-header-simple">
                <h4 class="environment-title-left">
                  <i class="fas fa-cloud"></i>
                  生产环境
                </h4>
                <button class="btn btn-primary btn-sm" id="prodEnvSaveBtn">
                  <i class="fas fa-save"></i>
                  保存
                </button>
              </div>
              <div class="form-group">
                <textarea class="textarea-input" id="productionEnvironmentConfig" 
                          placeholder="# 生产环境配置&#10;# 格式：IP地址 域名&#10;# 例如：&#10;10.0.0.100 api.example.com&#10;10.0.0.101 cdn.example.com"></textarea>
                <small class="form-help">
                  配置格式：<code>IP地址 域名</code>，每行一个映射。支持注释（以 # 开头）
                </small>
              </div>
            </div>
            
                         
             <!-- 自定义环境列表 -->
             <div class="custom-environments-container" id="customEnvironmentsContainer">
               <!-- 动态添加的自定义环境将显示在这里 -->
             </div>
             
             <!-- 新增环境按钮 -->
             <div class="add-environment-section">
               <button class="btn btn-outline btn-lg" id="addEnvironmentBtn">
                 <i class="fas fa-plus"></i>
                 新增环境
               </button>
             </div>
          </div>
        </div>



        <!-- 危险操作卡片 -->
        <div class="config-card danger-card">
          <div class="card-header">
            <h3 class="card-title">
              <i class="fas fa-exclamation-triangle"></i>
              危险操作
            </h3>
          </div>
          <div class="card-body">
            <div class="danger-actions">
              <button class="btn btn-danger" id="deleteProjectBtn">
                <i class="fas fa-trash"></i>
                删除项目
              </button>
              <button class="btn btn-outline" id="resetProjectBtn">
                <i class="fas fa-undo"></i>
                重置配置
              </button>
            </div>
            <small class="form-help danger-help">
              这些操作无法撤销，请谨慎操作。删除项目将移除所有相关配置。
            </small>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 模态对话框 -->
  <!-- 添加自定义规则对话框 -->
  <div class="modal" id="addCustomRuleModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">新增环境</h3>
        <button class="modal-close" onclick="closeModal('addCustomRuleModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="addCustomRuleForm">
          <div class="form-group">
            <label class="form-label" for="customRuleLabel">环境名称</label>
            <input type="text" class="form-input" id="customRuleLabel" 
                   placeholder="例如：开发环境、预发布环境等" required>
            <small class="form-help">给这个环境起一个便于识别的名称</small>
          </div>
          <div class="form-group">
            <label class="form-label" for="customRuleValue">环境配置</label>
            <textarea class="textarea-input" id="customRuleValue" 
                      placeholder="# 环境配置&#10;# 格式：IP地址 域名&#10;# 例如：&#10;192.168.1.200 api.example.com" required></textarea>
            <small class="form-help">配置格式：IP地址 域名，每行一个映射</small>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('addCustomRuleModal')">取消</button>
        <button class="btn btn-primary" id="confirmAddCustomRule">添加</button>
      </div>
    </div>
  </div>

  <!-- 编辑自定义规则对话框 -->
  <div class="modal" id="editCustomRuleModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">编辑自定义规则</h3>
        <button class="modal-close" onclick="closeModal('editCustomRuleModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="editCustomRuleForm">
          <div class="form-group">
            <label class="form-label" for="editCustomRuleLabel">规则名称</label>
            <input type="text" class="form-input" id="editCustomRuleLabel" required>
          </div>
          <div class="form-group">
            <label class="form-label" for="editCustomRuleValue">规则配置</label>
            <textarea class="textarea-input" id="editCustomRuleValue" required></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('editCustomRuleModal')">取消</button>
        <button class="btn btn-primary" id="confirmEditCustomRule">保存</button>
      </div>
    </div>
  </div>



  <!-- 删除确认对话框 -->
  <div class="modal" id="deleteConfirmModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">确认删除</h3>
        <button class="modal-close" onclick="closeModal('deleteConfirmModal')">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="confirm-message">
          <i class="fas fa-exclamation-triangle warning-icon"></i>
          <p id="deleteConfirmMessage">确定要执行此操作吗？</p>
          <p class="warning-text">此操作不可撤销。</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('deleteConfirmModal')">取消</button>
        <button class="btn btn-danger" id="confirmDeleteAction">删除</button>
      </div>
    </div>
  </div>

  <!-- 消息提示 -->
  <div class="toast" id="toast">
    <div class="toast-content">
      <i class="toast-icon"></i>
      <span class="toast-message"></span>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="api.js"></script>
  <script src="utils.js"></script>
  <script src="config.js"></script>
</body>
</html>